import { Form,Icon,Input, Select,Button, Radio, Checkbox, message } from "antd";
import React from "react";
import styles from "../../index.less"

class TableNode extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      buttonInfo:{
        confirmButtonSelected:1,
        confirmButtonName:"确定",
        cancelButtonSelected:1,
        cancelButtonName:"取消"
      },
      editConfirm:false,
      editCancel:false
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  initForm = data => {
    const { form:{setFieldsValue} } = this.props
    setFieldsValue({label:data.label})
    if(data.data){
      setFieldsValue({storeType:data.data.store.storeType,buttonGroupTitle:data.data.store.buttonGroupTitle})
      //2024.2.21 需求修改-确定/取消两个按钮都必须选择
      this.setState({
        buttonInfo:{
          confirmButtonSelected:data.data.store.confirmButtonSelected,
          confirmButtonName:data.data.store.confirmButtonName,
          cancelButtonSelected:data.data.store.cancelButtonSelected,
          cancelButtonName:data.data.store.cancelButtonName
        }
      })
    }
  }

  changeName = (e,type) => {
    const { buttonInfo } = this.state;
    buttonInfo[type] = e.target.value;
    this.setState({
      buttonInfo
    })
  }

  doNameEdit = (nameType,editType) => {
    const { buttonInfo } = this.state;
    if(buttonInfo[nameType].length == 0){
      message.error("请输入按钮名字")
      return false
    }
    let obj = {}
    obj[editType] = false;
    this.setState(obj)
  }

  changeCancelSelect = e => {
    const { buttonInfo } = this.state;
    buttonInfo.cancelButtonSelected = e.target.checked ? 1 : 0
    this.setState({
      buttonInfo
    })
  }

  checkSave = () => {
    const { buttonInfo } = this.state;
    this.props.form.validateFields((error,values) => {
      if(!error){
        let obj = {
          label:values.label,
          data:{
            store:{
              storeType:values.storeType,
              ...buttonInfo,
              buttonGroupTitle:values.buttonGroupTitle
            }
          }
        }
        this.props.doSave(obj)
      }
    })
  }

  render(){
    const { editConfirm,editCancel,buttonInfo } = this.state;
    const { form:{getFieldDecorator,getFieldValue} } = this.props;
    console.log(editConfirm);
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    };
    return(
      <Form {...formItemLayout}>
        <div className={styles.formTitle}><Icon style={{ transform: "rotate(90deg)" }} type='minus' />基本信息</div>
        <Form.Item label="节点名称">
          {
            getFieldDecorator("label",{rules:[{required:true,message:"请输入"}]})(
              <Input className={styles.inputItem} />
            )
          }
        </Form.Item>
        <Form.Item label="标题名称">
          {
            getFieldDecorator("buttonGroupTitle")(
              <Input className={styles.inputItem} />
            )
          }
        </Form.Item>
        <Form.Item label="落表方式" colon={false}>
          {
            getFieldDecorator("storeType",{initialValue:0})(
              <Radio.Group>
                <Radio value={0}>直接落表</Radio>
                <Radio value={1}>按钮落表</Radio>
              </Radio.Group>
            )
          }
        </Form.Item>
        {
          getFieldValue("storeType") == 1 ? (
            <Form.Item label="按钮选择">
              <div style={{marginBottom:10}}>
                <Checkbox checked={buttonInfo.confirmButtonSelected == 1 } disabled />
                {
                  editConfirm ? (
                    <span style={{display:"inline-block"}}>
                      <Input value={buttonInfo.confirmButtonName} onChange={(e) => this.changeName(e,'confirmButtonName')} style={{width:200,marginLeft:10}} />
                      <Icon type="check" style={{marginLeft:10,cursor:"pointer"}} onClick={() => this.doNameEdit('confirmButtonName','editConfirm')} />
                    </span>
                  ) : (
                    <span style={{display:"inline-block"}}>
                      <label style={{marginLeft:10}}>{buttonInfo.confirmButtonName}</label>
                      <Icon type="form" style={{marginLeft:10,cursor:"pointer"}} onClick={() => this.setState({editConfirm :true})} />
                    </span>
                  )
                }
                
              </div>
              <div>
                <Checkbox checked={buttonInfo.cancelButtonSelected == 1 } onChange={this.changeCancelSelect} />
                {
                  editCancel ? (
                    <span style={{display:"inline-block"}}>
                      <Input value={buttonInfo.cancelButtonName} onChange={(e) => this.changeName(e,'cancelButtonName')} style={{width:200,marginLeft:10}} />
                      <Icon type="check" style={{marginLeft:10,cursor:"pointer"}} onClick={() => this.doNameEdit('cancelButtonName','editCancel')} />
                    </span>
                  ) : (
                    <span style={{display:"inline-block"}}>
                      <label style={{marginLeft:10}}>{buttonInfo.cancelButtonName}</label>
                      <Icon type="form" style={{marginLeft:10,cursor:"pointer"}} onClick={() => this.setState({editCancel :true})} />
                    </span>
                  )
                }
                
              </div>
            </Form.Item>
          ) : ''
        }
        <Form.Item label=" " colon={false}>
          <Button type="primary" onClick={this.checkSave}>保存</Button>
        </Form.Item>

      </Form>
    )
  }
}

export default Form.create()(TableNode)